<template>
    <div>
        省
        <select v-model="shengkey">
            <option v-for="(item,key, index) in alllist[0]" :key="index" :value="key">{{item}}</option>

        </select>
        市
        <select v-model="shikey">
            <option v-for="(item,key, index) in shilist" :key="index" :value="key">{{item}}</option>

        </select>
        
        区
        <select v-model="qukey">
            <option v-for="(item,key, index) in qulist" :key="index" :value="key">{{item}}</option>

        </select>
    </div>
</template>
<script>

import data from '@/api/data'

export default {
    name: 'shengShiQu',
    data() {
        return {
            alllist: data,
            shilist: {},
            qulist: {},
            shengkey: '',
            shikey: '',
            qukey: ''
        }
    },
    watch: {
        shengkey() {
            let key = '0,' + this.shengkey
            this.qulist = {}
            this.shilist =  this.alllist[key]
        },
        shikey() {
            let key = '0,' + this.shengkey + ',' + this.shikey
            this.qulist =  this.alllist[key]
        }
    },

}
</script>
<style>
    select {
        width: 200px;
    }
</style>
